<template>
    <div id="index">
        <dv-full-screen-container class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
                    <div class="d-flex jc-center">
                        <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;"/>
                        <div class="title">
                            <span class="title-text">兵哥营销数据平台</span>
                            <dv-decoration-6
                                    class="title-bototm"
                                    :reverse="true"
                                    :color="['#50e3c2', '#67a1e5']"
                                    style="width:3.125rem;height:.22rem;"
                            />
                        </div>
                        <dv-decoration-8
                                :reverse="true"
                                :color="['#568aea', '#000000']"
                                style="width:2.5rem;height:.625rem;"
                        />
                    </div>
                    <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex" style="width: 40%">
                        <div
                                class="react-right ml-4"
                                style="width: 6.25rem; text-align: left;background-color: #0f1325;"
                        >
                            <span class="react-before"></span>
                            <span class="text">兵哥铝业</span>
                        </div>
                        <div class="react-right ml-3" style="background-color: #0f1325;">
                            <span class="text colorBlue">营销数据</span>
                        </div>
                    </div>
                    <div style="width: 40%" class="d-flex">
                        <div class="react-left bg-color-blue mr-3">
                            <span class="text fw-b">当前时间</span>
                        </div>
                        <div
                                class="react-left mr-4"
                                style="width: 6.25rem; background-color: #0f1325; text-align: right;"
                        >
                            <span class="react-after"></span>
                            <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">
                    <!-- 第三行数据 -->
                    <div class="bototm-box">
                        <dv-border-box-1 style="width:15.375rem;height: 10rem">
                            <bottomLeft :chart-data="data"/>
                        </dv-border-box-1>
                        <dv-border-box-8 style="width: 6.875rem;display: grid;margin-left: 4.7rem;height: 10rem">
                            <centerRight1 :chart-data="data" />
                        </dv-border-box-8>
                        <!--<dv-border-box-10 title="潘建江组" style="width:10.875rem">
                          <bottomLeft :chart-data="data[1]" />
                        </dv-border-box-10>-->
                    </div>

                    <!-- 第四行数据 -->
                    <div class="bototm-box">
                        <!--<dv-border-box-10 style="width:15.375rem">
                            <bottomLeft :chart-data="data"/>
                        </dv-border-box-10>-->
                        <!--<dv-border-box-8 style="width: 6.875rem;display: grid;margin-left: 4.7rem">
                            <centerRight1/>
                        </dv-border-box-8>-->
                        <!--<dv-border-box-10 title="梁明辉组" style="width:10.875rem">
                          <bottomLeft :chart-data="data[3]" />
                        </dv-border-box-10>-->
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
    import {formatTime} from '../utils/index.js'
    import {getDvSalesmanByGroup, getSalesmanData, getGroupSalesmanData, getSalesTopData} from '../api/report.js'

    import bottomLeft from "./bottomLeft";
    import centerRight1 from "./centerRight1";

    export default {
        data() {
            return {
                data: [],

                topData: [],


                loading: true,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            };
        },
        components: {

            bottomLeft,
            centerRight1
        },

        created() {

            this.setSalesTopData();
            /*this.setGroupSalesmanData();
            this.setDvSalesmanByGroup();
            this.setSalesmanData();*/

        },
        mounted() {
            this.changeTiming();
            this.timeFn();
            this.cancelLoading();
        },

        methods: {
            setDvSalesmanByGroup() {
                getDvSalesmanByGroup().then(response => {
                    if (response.code == 'success') {


                    }
                });
            },
            setSalesTopData() {
                getSalesTopData().then(response => {
                    if (response.code == 'success') {
                        this.data = response.data.person;
                        this.topData = response.data.person;
                        console.log("转换后数据"+JSON.stringify(this.topData))

                    }
                });
            },
            setGroupSalesmanData() {
                getGroupSalesmanData().then(response => {
                    if (response.code == 'success') {
                        this.groupData = response.data;

                    }
                });
            },
            setSalesmanData() {
                getSalesmanData().then(response => {
                    if (response.code == 'success') {


                    }
                });
            },
            timeFn() {
                setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
            changeTiming() {
                setInterval(() => {
                    this.setSalesTopData();
                }, 300000);
            },
            cancelLoading() {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            }
        }
    };
</script>

<style lang="scss">
    @import '../assets/scss/index.scss';
</style>
